<template>
<div class="wrap">
<xcl-header :page-title="pageTitle" :call-back="callBack" :header-right="headerRight"></xcl-header>
<div class="content">
	<div class="list-block">
	    <ul>
	    <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label"  style="width:21%">验证码</div>
	            <div class="item-input">
	              <input type="text" maxlength="4" v-model="user.softCodeInput"  placeholder="输入验证码">	              
	            </div>
	            <div class="item-input"><img  :src="softCode" @click="refreshCode" /></div>
	          </div>
	        </div>
	      </li>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label" style="width:21%">手机号</div>
	            <div class="item-input">
	              <input type="text" placeholder="输入11位手机号" maxlength="11" v-model="user.userName">
	            </div>
	            <div class="item-input text-right">
	               <a :class="[user.smsCodeGetting ? 'mute' : '']" href="javascript:;" v-text="user.smsCodeText" @click="getSmsCode"></a>
	            </div>
	          </div>
	        </div>
	      </li>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label" style="width:21%">动态码</div>
	            <div class="item-input">
	              <input type="text" placeholder="输入短信中6位验证码" maxlength="6" v-model="user.smsCode">
	            </div>
	          </div>
	        </div>
	      </li>
	      
		</ul>
	</div>
	<div class="content-block">
	<button :class="['button','button-fill','btn-style',forbidenLogin ? 'disabled':'']"  @click="signUp">下一步</button>
	</div>
	<div class="content-block f12">
		点击即代表同意<a v-link="{path:'/Protocal'}">《新策略用户服务协议》</a>
	</div>		
</div>
<xcl-toast :show="toast.show" :show-content="toast.content"></xcl-toast>

  </div>
</template>
<script>
	import xclHeader from '../components/header.vue'
	import {getCheck,ERROR_DEFINE}  from '../libs/utils'
	import xclToast from '../components/xclToast.vue'

	let UserProxy =  require("../proxy/user_proxy");
	let User = new UserProxy();
	export default {
		data(){
			return{
				pageTitle:'注册',
				headerRight:'登录',
				callBack:()=>{this.$router.go('/Login');},
				softCode:SoftCodeUrl+'?img='+Math.floor(Math.random() * (10000 + 1)),
				forbidenLogin:true,
				header:{
					show:true
				},
                user:{
                	userName:'',
                	softCodeInput:'',
                	smsCodeText:'获取动态码',
                	smsCode:'',
                	smsCodeGetting:true,
                	smsCodeGetting2:false
                },
                toast:{
                	show:false,
                	content:''
                }
			}
		},
		watch:{
			'user':{
				handler:function (val,oldVal) {
					if(!getCheck.checkPhone(val.userName) || !val.smsCode || !val.softCodeInput){
						this.forbidenLogin = true;
					}else{
						this.forbidenLogin = false;
					}
					if(!getCheck.checkPhone(val.userName)  || !val.softCodeInput || val.smsCodeGetting2){
						this.user.smsCodeGetting = true;
					}else{
						this.user.smsCodeGetting = false;
					}
				},
				deep:true
			}
		},
		methods:{
			signUp(){
				let _this = this;
				if(this.forbidenLogin) return false;
				User.smsLogin(_this.user.userName+'|'+_this.user.softCodeInput , _this.user.smsCode,(d)=>{
					if(d.code == 406){
						localStorage.phoneNumber = _this.user.userName;
						localStorage.smsCode  = _this.user.smsCode;
						_this.$router.go('/SignUpStep2');
					}else{
						_this.showToast(ERROR_DEFINE[d.code]);
					}
				});
			},
			getSmsCode(){
				let _this = this;
				if(_this.user.smsCodeGetting) return false;
				if(!this.user.softCodeInput){
					this.showToast('请先输入图片验证码！');
					return false;
				}
				if(!getCheck.checkPhone(this.user.userName)){
					this.showToast('请先输入有效的手机号！');
					return false;
				}
				User.phoneIsExisted(_this.user.userName,(d1)=>{
					if(d1.code == 200  && d1.results[0]){
						_this.showToast('该手机已经被注册');
					}else{
						User.requestSMSValidate(_this.user.userName+'|'+_this.user.softCodeInput,(d)=>{
							if(d.code == 200 && d.results && d.results.length){
								_this.showToast('短信动态码已发送');
								_this.user.smsCodeGetting2 = true;
								var start = 60;
								var timer = setInterval(()=>{
									_this.user.smsCodeText = start+'s后重新发送';
									start--;
									if(start <= 0) {
										clearInterval(timer);
										_this.user.smsCodeGetting2 = false;
										_this.user.smsCodeText = '重新发送';
									}
								},1000);
								//only for development
								_this.user.smsCode = d.results[0];
							}else if(d.code == 404){
								_this.showToast(ERROR_DEFINE[d.code]);
								_this.refreshCode();
							}else{
								_this.showToast(ERROR_DEFINE[d.code]);
							}
						});
					}
				});
				
			},
			refreshCode(){
				this.softCode=SoftCodeUrl+'?img='+Math.floor(Math.random() * (10000 + 1));
			},
			showToast(text){
				this.toast={show:true,content:text};
				setTimeout(()=>{this.toast.show =  false},2800);
			}
		},
		components:{
           "xclHeader":xclHeader,  
           'xclToast':xclToast              
        }
	}
</script>
<style  lang="stylus">
	.text-right
		text-align right
	.btn-style
		height 2rem
		font-size .85rem
		line-height 2rem !important
		width:100%
	.mute
		color #ddd	
	.f12
		font-size .8em	
</style>	
